<!-- 已放好客户 -->
<template>
  <div class="already-put">
    <!-- 查询 -->
    <el-date-picker size="mini" type="daterange" v-model="time" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>
    <div class="oper">
      <el-button type="primary" size="mini" @click="sear">查询</el-button>
      <el-button size="mini">清空</el-button>
    </div>
    <!-- 列表 -->
    <div class="list">
      <span class="no-data" v-if="!dataList.length">暂无数据</span>
      <el-row :gutter="15">
        <el-col :span="6" v-for="(item, index) in dataList" :key="index">
          <div class="item">
            {{index+1}}、
            <el-button circle icon="el-icon-printer" size="mini"></el-button>
            <a>{{item.companyName}}({{item.completeNum}}/{{item.countNum}})</a>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  putAwayUser
} from './api/putBoxManage'
export default {
  data () {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      time: [],
      dataList: []
    }
  },
  async mounted () {
    await this.getData()
  },
  methods: {
    async getData () {
      let res = await putAwayUser({})
      this.dataList = res.data
    },
    async sear () {
      let res = await putAwayUser(
        {
          startTime: this.time[0],
          endTime: this.time[1]
        }
      )
      if (res.status === 200) {
        this.dataList = res.data
      } else {
        this.$notify.error({
          title: '错误',
          message: '接口出错!'
        })
      }
    }
  }
}
</script>

<style lang="less">
.list {
  padding: 0 10px 10px 10px;
  margin-top: 10px;
  border: 1px solid #dcdfe6;
  min-height: 500px;
  position: relative;
  .item {
    margin-top: 10px;
    display: inline-block;
    a {
      color: #409EFF;
    }
  }
  .no-data {
    font-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #909399;
  }
}

.oper {
  display: inline-block;
  margin-left: 30px;
}
</style>
